<section class="reset-password">
  <div class="container pt-7 h-8">
    <h1 class="text-center mb-0 h4">{{ 'customer.reset_password.title' | t }}</h1>
    <p class="text-center mt-1 gray-600 small">
      {{ 'customer.reset_password.subtext' | t: email: email }}
    </p>
    <div class="row justify-content-center">
      <div class="mw-text-3">
        {% form 'reset_customer_password', class: 'as-validate-form', novalidate: 'novalidate', autocomplete: "off" %}
        {%- if form.errors -%}
          <div class="as-email-errors-wrap">
            <div class="mt-4 d-flex align-items-center">
              <div class="me-2 text-danger">
                {% render 'icon-alert-circle' %}
              </div>
              <div class="text-danger fs-footnote">{{ 'customer.recover_password.recover_errors' | t }}</div>
            </div>
          </div>
            {%- endif -%}
          <div class="mt-4 align-items-center as-pwd-wrap d-flex form-pristine position-relative flex-column">
            <input type="password" name="customer[password]" data-pristine-pattern= "/^[^\s]{8,}$/" data-pristine-pattern-message="{{ 'customer.customer.password_pattern_error_message' | t }}" data-pristine-required-message="{{ 'customer.customer.password_error_message' | t }}"  placeholder="{{ 'customer.reset_password.password' | t }}" class="as-pwd-input input-pristine form-control pe-6 rounded-pill" id="pwd" required>
            <div class="as-visible-control visible-control content-invisible">
              <div class="icon-eye-off cursor-pointer">
                {% render 'icon-eye-off' %}
              </div>
              <div class="icon-eye cursor-pointer">
                {% render 'icon-eye' %}
              </div>
            </div>
          </div>
          <div class="mt-3 align-items-center as-pwd-wrap d-flex form-pristine position-relative flex-column">
            <input type="password" name="customer[password_confirmation]" data-pristine-required-message="{{ 'customer.customer.password_error_message' | t }}" placeholder="{{ 'customer.reset_password.password_confirm' | t }}" class="as-pwd-input input-pristine form-control pe-6 rounded-pill" data-pristine-equals="#pwd" data-pristine-equals-message="{{ 'customer.customer.reset_password_error_message' | t }}" required>
            <div class="as-visible-control visible-control content-invisible">
              <div class="icon-eye-off cursor-pointer">
                {% render 'icon-eye-off' %}
              </div>
              <div class="icon-eye cursor-pointer">
                {% render 'icon-eye' %}
              </div>
            </div>
          </div>
          <div class="mt-4">
            <button class="btn btn-primary w-100 btn-mw" type="submit">{{ 'customer.reset_password.submit' | t }}</button>
          </div>
        {% endform %}
      </div>
    </div>
  </div>
</section>